<template>

        <NavTopBar class="nav-top-bar" />
        <Main class="main" />
    <div class="content">
        <router-view  />
    </div>
    <Bottom />

</template>

<script setup>
import NavTopBar from "@/components/NavTopBar/NavTopBar.vue";
import Main from "@/components/Main/Main.vue";
import Bottom from "@/components/Bottom/Bottom.vue";
</script>

<style scoped>
.nav-top-bar{
    position: fixed;
    top: 0;
    left: 0;
    /*width: 100%; !* 可以根据需要调整宽度 *!*/
    /*height: 60px; !* 高度可以根据需要调整 *!*/
    /*background-color: #333; !* 背景颜色 *!*/

    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    z-index: 1000; /* 确保它在其他元素之上显示 */
}
.main{
    /*position: fixed;*/
    /*z-index: 999;*/
    position: fixed;
    top: 30px; /* 导航栏的高度 */
    left: 0;
    right: 0; /* 使宽度适应屏幕宽度 */
    padding: 20px; /* 内边距 */
    background-color: #f8f8f8; /* 背景颜色 */
    z-index: 999;
}
.content{
    padding-top: 5rem; /* 确保内容从 `<Main>` 下方开始 */
    min-height: calc(100vh - 120px); /* 至少与视口高度相等，减去 `<Main>` 的高度 */
    background-color: #fff; /* 背景颜色 */
    /*position: fixed;*/
    /*z-index: 998;*/
}



</style>